<template>
  <div class="user">
    <img
      class="avatar"
      style="width: 120px; height: 120 px; border-radius: 50%"
      :src="user.avatar | dalImg"
      alt=""
    />
    <p>{{ user.nickName ? user.nickName : user.userName }}</p>
    <van-button type="danger">签到</van-button>
    <div class="links">
      <van-cell-group>
        <van-cell title="修改密码" is-link @click="onClickChangePwd" />
        <van-cell title="修改个人信息" is-link @click="onClickChangePerInfo" />
        <van-cell title="我的订单" is-link @click="onClickOrderdetail" />
        <van-cell title="我的积分" is-link />
      </van-cell-group>
    </div>
    <van-button block color="" @click="quit">退出</van-button>
  </div>
</template>

<script>
import { loadInfoAPI } from '../services/auth';
import { removeToken } from '../utils/tools';
import { Toast } from 'vant';
export default {
  data() {
    return {
      user: {},
    };
  },
  methods: {
    quit() {
      removeToken();
      Toast.success('退出成功');
      setTimeout(() => {
        this.$router.replace({
          name: 'Login',
        });
      }, 1000);
    },
    onClickChangePwd() {
      this.$router.push({
        name: 'ChangePwd',
      });
    },

    onClickChangePerInfo() {
      this.$router.push({
        name: 'ChangePerInfo',
      });
    },
    onClickOrderdetail() {
      this.$router.push({
        name: 'ChangePerInfo',
      });
    },
    onClickIntegral() {
      this.$router.push({
        name: 'Integral',
      });
    },
  },
  async created() {
    const res = await loadInfoAPI();
    this.user = res.data;
  },
};
</script>

<style scoped>
.user {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.avatar {
  margin: 30px auto;
  display: block;
}
.links {
  width: 100%;
}
</style>
